<template>
  <div id="app">
    <title-bar
      titleText="绑定银行卡"
      :needBorder="true"
    />

    <div class="page-content-wrapper">
      <!-- 身份信息包裹层 -->
      <id-face style="margin-left:0.4rem" />

      <!-- 卡类型切换 -->
      <div class="card-type-toggle-wrapper flex-h  flex-ve">
        <span>卡类型</span>
        <button
          @click="changToCreditCard(false)"
          class="card-type-toggle-btn"
          :class="isCreditCard?'card-type-toggle-btn-inactive':'card-type-toggle-btn-active'"
        >储蓄卡</button>
        <button
          @click="changToCreditCard(true)"
          class="card-type-toggle-btn"
          :class="isCreditCard?'card-type-toggle-btn-active':'card-type-toggle-btn-inactive'"
        >信用卡</button>
      </div>

      <!-- 表单-信用卡的表单 -->
      <credit-card-form
        v-if="isCreditCard"
        ref="cardform"
      />
      <!-- 表单-储蓄卡的表单 -->
      <debit-card-form
        v-else
        ref="cardform"
      />
    </div>
  </div>
</template>

<script>
import TitleBar from '@/components/titlebar/TitleBar'
import CreditCardForm from './components/CreditCardForm'
import DebitCardForm from './components/DebitCardForm'
import IDFace from './components/IDFace'
import { onBackFunc } from '@/utils/OnBackUtils'
export default {
  components: {
    'title-bar': TitleBar,
    'credit-card-form': CreditCardForm,
    'debit-card-form': DebitCardForm,
    'id-face': IDFace
  },
  name: 'App',
  data() {
    return {
      isCreditCard: false
    }
  },
  mounted() {
    window.onBack = backParams => {
      backParams = {
        changeinfosuccess: '1'
      }
      backParams = JSON.stringify(backParams)
      onBackFunc(backParams, params => {
        // 如果修改信息成功返回，要清空用户之前输入的银行卡信息
        if (params['changeinfosuccess'] === '1') {
          this.$refs.cardform.clearAllInput()
        }
      })
    }
  },
  methods: {
    changToCreditCard: function (active) { this.isCreditCard = active }
  }
}
</script>

<style>
html,
body {
  height: 100%;
  overflow: hidden;
}
#app {
  height: 100%;
}
/* 全局设置，placeholder颜色为#cccccc */
input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #999;
}
::-moz-placeholder {
  /* Firefox 19+ */
  color: #999;
}
:-ms-input-placeholder {
  /* IE 10+ */
  color: #999;
}
:-moz-placeholder {
  /* Firefox 18- */
  color: #999;
}
/* 页面除标题栏以外的部分 */
.page-content-wrapper {
  /* 为了让滑动更流畅 */
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  box-sizing: border-box;
  padding: 20px 0 0 0;
}
/*切换按钮包裹曾*/
.card-type-toggle-wrapper {
  width: 750px;
  height: 120px;
}
/*卡类型切换文字*/
.card-type-toggle-wrapper span:first-of-type {
  width: 200px;
  padding-left: 40px;
  text-align: left;
  font-size: 15px; /*no*/
  line-height: 20px; /*no*/
  color: #333;
  margin-bottom: 20px;
}
/*卡类型切换第二个按钮*/
.card-type-toggle-wrapper button:nth-of-type(2) {
  margin-left: 50px;
}

/**切换按钮*/
.card-type-toggle-btn {
  width: 160px;
  height: 60px;
  font-size: 15px; /*no*/
  border-radius: 30px;
  margin-bottom: 10px;
}
/*切换按钮未激活*/
.card-type-toggle-btn-inactive {
  color: #999;
  background: none;
  border: 1px solid rgba(153, 153, 153, 1); /* no */
}
/*切换按钮激活状态*/
.card-type-toggle-btn-active {
  color: #fff;
  background: rgba(55, 149, 255, 1);
  border: 1px solid rgba(55, 149, 255, 1); /* no */
}
</style>
